//商票质押审批通过页面
<template>
  <div class="box">
    <div class="content">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <span class="back" @click="goBack()">返回上一页</span>
      </el-breadcrumb>
      <!-- 一楼 -->
      <div class="f1">
        <div class="title" v-if="projectMessage">
          <p>{{ projectMessage.oderid }}</p>
          <h5
            :class="{
              spz: projectMessage.status == '审批中',
              sptg: projectMessage.status == '审批通过',
              spjj: projectMessage.status == '审批拒绝',
              djf: projectMessage.status == '待缴费',
              dfk: projectMessage.status == '待放款',
              yfk: projectMessage.status == '已放款',
              yyq: projectMessage.status == '已逾期',
              zcjx: projectMessage.status == '正常结项',
              yqjx: projectMessage.status == '逾期结项',
              yqx: projectMessage.status == '已取消',
            }"
          >
            {{ projectMessage.status }}
          </h5>
          <h5 style="background-color: #ff6060">质押</h5>
        </div>
        <!-- 产品信息 -->
        <div class="details" v-if="projectMessage">
          <div class="details-item">
            <div class="details-item-left">
              <ul>
                <li>产品名称：</li>
                <li>产品类型：</li>
              </ul>
              <div>
                <p>{{ projectMessage.productname }}</p>
                <p>{{ getData(projectMessage.producttype) }}</p>
              </div>
            </div>
            <div class="details-item-left">
              <ul>
                <li>金融机构：</li>
                <li>质押利率（%）：</li>
              </ul>
              <div style="width: 310px">
                <p>{{ getData(projectMessage.orgname) }}</p>
                <p>
                  {{ getArea(projectMessage.radio) }}
                  <i v-show="projectMessage.radio">%</i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 二楼 -->
      <div class="f2">
        <!-- 顶部标签 -->
        <div class="title">
          <h3 :class="{ active: row == 1 }">
            <a @click="changeHash('#box1')">项目信息</a>
          </h3>
        </div>
        <!-- 票据信息表格 -->
        <div class="f2-f2" v-if="a">
          <!-- 审批进度 -->
          <h2>项目进度</h2>
          <div class="schedule" v-if="findxmjd">
            <div class="schedule1">
              <img src="@/assets/image/组194.png" alt="" />
              <h1
                :class="{
                  dfk: findxmjd.b == 'null',
                }"
              ></h1>
              <img
                v-if="findxmjd.b == 'null' || findxmjd.b == null"
                src="@/assets/image/组195.png"
                alt=""
              />
              <img v-else src="@/assets/image/组194.png" alt="" />
              <h1
                :class="{
                  dfk: findxmjd.c == null,
                }"
              ></h1>
              <img
                v-if="findxmjd.c == 'null' || findxmjd.c == null"
                src="@/assets/image/组195.png"
                alt=""
              />
              <img v-else src="@/assets/image/组194.png" alt="" />
            </div>
            <div class="schedule2">
              <div
                class="state"
                :class="{
                  jj: findxmjd.statu == '拒绝',
                  yqx: findxmjd.statu == '已取消',
                  yyq: findxmjd.statu == '已逾期',
                  yfk: findxmjd.statu == '已放款',
                }"
                v-if="findxmjd.statu != 'null'"
              >
                {{ findxmjd.statu }}
              </div>
              <span>业务申请</span>
              <h2></h2>
              <span
                :class="{
                  dfk: findxmjd.b == 'null',
                }"
                >授信审批</span
              >
              <h2></h2>
              <span
                :class="{
                  dfk: findxmjd.c == null,
                }"
                >项目结项</span
              >
            </div>
            <div class="schedule3">
              <span>{{ findxmjd.a }}</span>
              <h3></h3>
              <span>{{ findxmjd.b == "null" ? "" : findxmjd.b }}</span>
              <h3></h3>
              <span>{{ findxmjd.c == null ? "" : findxmjd.c }}</span>
            </div>
          </div>
          <!-- 融资信息-->
          <h2>
            票据信息
            <span @click="checkApply">
              <el-image
                style="width: 19px; height: 14px"
                :src="icon"
                :preview-src-list="imgData"
              >
              </el-image>
            </span>
          </h2>
          <div class="details-item">
            <div class="details-item-left">
              <ul style="position: relative">
                <li>票据号码：</li>
                <li>票面金额（元）：</li>
                <li>票据到期日：</li>
              </ul>
              <div>
                <p>{{ getData(b.billnumber) }}</p>
                <p>{{ getArea(b.faceamount) }}</p>
                <p>{{ getDate(b.billdate) }}</p>
              </div>
            </div>
            <div class="details-item-left">
              <ul>
                <li>承兑人名称：</li>
                <li>票据剩余天数：</li>
              </ul>
              <div style="width: 300px">
                <p>{{ getData(b.acceptorname) }}</p>
                <p>{{ list.residualdate }}</p>
              </div>
            </div>
          </div>
          <!--发票信息-->
          <h2>发票信息</h2>
          <el-table
            :data="InvoiceList"
            border
            highlight-current-row
            stripe
            type="index"
            style="width: 100%"
            :header-cell-style="{
              background: '#f3f3f3',
              color: '#4D4D4D',
            }"
          >
            <template v-slot:empty>
              <div>暂无数据</div>
            </template>
            <el-table-column
              prop="number"
              label="序号"
              min-width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invCode"
              label="发票代码"
              min-width="210"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invNo"
              label="发票编号"
              min-width="210"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invAmount"
              label="发票金额（元）"
              min-width="150"
              align="center"
            >
              <template #default="scope">
                {{ getArea(scope.row.invAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="currency"
              label="币种"
              min-width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invDate"
              label="开票日期"
              min-width="180"
              align="center"
            >
              <template #default="scope">
                {{ getDate(scope.row.invDate) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="applyid"
              label="合同编码"
              min-width="210"
              align="center"
            >
            </el-table-column>
            <el-table-column label="发票详情" min-width="100" align="center">
              <template #default="scope">
                <span
                  class="span"
                  @click="checkSuccess(scope.$index, InvoiceList)"
                  type="text"
                  size="small"
                >
                  查看
                </span>
              </template>
            </el-table-column>
          </el-table>
          <!--合同信息-->
          <h2>合同信息</h2>
          <el-table
            :data="contractList"
            border
            highlight-current-row
            stripe
            type="index"
            style="width: 100%"
            :header-cell-style="{
              background: '#f3f3f3',
              color: '#4D4D4D',
            }"
          >
            <template v-slot:empty>
              <div>暂无数据</div>
            </template>
            <el-table-column
              prop="number"
              label="序号"
              min-width="2%"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="conNo"
              label="合同编号"
              min-width="8%"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="conName"
              label="合同名称"
              min-width="8%"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="conAmount"
              label="合同金额（元）"
              min-width="5%"
              align="center"
            >
              <template #default="scope">
                {{ getArea(scope.row.conAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="currency"
              label="币种"
              min-width="5%"
              align="center"
            >
            </el-table-column>
            <el-table-column label="合同详情" min-width="4%" align="center">
              <template #default="scope">
                <span
                  class="span"
                  @click="checkSuccess(scope.$index, contractList)"
                  type="text"
                  size="small"
                >
                  查看
                </span>
              </template>
            </el-table-column>
          </el-table>
          <h2>融资信息</h2>
          <div class="details-item">
            <div class="details-item-left">
              <ul style="width: 180px; position: relative">
                <li>金融机构：</li>
                <li>产品名称：</li>
                <li>产品类型：</li>
                <li>借款利率（年化）：</li>
                <li>担保费率（年化）：</li>
                <li>担保服务费（元）：</li>
              </ul>
              <div style="width: 290px">
                <p>{{ getData(projectMessage.orgname) }}</p>
                <p>{{ getData(projectMessage.productname) }}</p>
                <p>{{ getData(projectMessage.producttype) }}</p>
                <p>
                  {{ getArea(projectMessage.radio) }}
                  <i v-show="projectMessage.radio">%</i>
                </p>
                <p>
                  {{ getArea(a.guaranteerate) }}
                  <i v-show="a.guaranteerate">%</i>
                </p>
                <p>{{ getArea(a.guaranteefee) }}</p>
              </div>
            </div>
            <div class="details-item-left">
              <ul style="width: 180px">
                <li>预计到账金额（元）：</li>
                <li>预计退回尾款（元）：</li>
                <li>借款期限（月）：</li>
                <li>放款日期：</li>
                <li>技术服务费率（年化）：</li>
                <li>技术服务费（元）：</li>
              </ul>
              <div style="width: 180px">
                <p>{{ getArea(a.financingamount) }}</p>
                <p>{{ getArea(a.returnmount) }}</p>
                <p>{{ getData(a.deadline) }}</p>
                <p>{{ getDate(a.loandate) }}</p>
                <p>
                  {{ getArea(a.technicalservicerate) }}
                  <i v-show="a.technicalservicerate">%</i>
                </p>
                <p>{{ getArea(a.technicalservice) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看票据正反面信息 -->
    <el-dialog
      title="票面信息"
      v-model="contractCardbackVisible"
      width="40%"
      center
    >
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="frontImg.length != 0"
        style="text-align: center; width: 300px; heigth: 300px"
        class="dialog-center"
        @click="contractCardbackVisible = false"
      >
        <img
          v-for="(item, index) in frontImg"
          :key="index"
          style="width: 100%; heigth: 100%; margin-bottom: 15px"
          :src="item.path"
          alt=""
        />
        <!-- <img style="width: 100%; heigth: 100%" :src="reverseImg" alt="" /> -->
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>
      <div
        v-else
        style="text-align: center; margin-bottom: 30px"
        class="dialog-center"
      >
        <h4>暂无票据资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button
            class="dialog-footer-bnt btn1"
            @click="contractCardbackVisible = false"
          >
            取 消
          </button>
          <button
            class="dialog-footer-bnt btn2"
            @click="contractCardbackVisible = false"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { findSP, getFilePath, myPostFetch } from "@/utils";
import { AreaDispose, dateDispose, dataDispose } from "@/utils/filters.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      findxmjd: null,
      icon: "http://operate.thunlink.cn/protocol/image/票.png",
      imgData: null,
      status: "",
      oderid: "",
      //产品数据
      row: 1,
      id: "", //项目id
      spid: "",
      frontImg: [], //票据正面
      contractCardbackVisible: false, //弹出框
      projectMessage: null, // 产品信息
      a: null,
      list: null,
      InvoiceList: null,
      contractList: null,
    };
  },
  mounted() {
    this.id = localStorage.getItem("id");
    this.spid = localStorage.getItem("spid");
    // this.status = this.shangPiaoDetailsParameter.status;
    this.findSP();
    this.getInvoice();
    this.getContract();
    this.getFindxmjd();
    setTimeout(() => {
      this.checkApply();
    }, 500);
  },

  methods: {
    // 金额处理
    getArea(value) {
      return AreaDispose(value);
    },
    // 时间处理
    getDate(value) {
      return dateDispose(value);
    },
    // 数据处理 为空显示为 -
    getData(value) {
      return dataDispose(value);
    },
    // 项目进度
    async getFindxmjd() {
      let url = "/api/hubeibusienss/findxmjd";
      let params = {
        applyid: this.id,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        let date = data.data.b.split("@")[0];
        let b = data.data.b.split("@")[1];
        this.findxmjd = data.data;
        this.findxmjd.b = date;
        this.findxmjd.statu = b;
      }
    },
    async findSP() {
      let data = await findSP(this.spid, this.id);
      if (data.data.businessSPinfo) {
        this.oderid = data.data.oderid;
        this.projectMessage = data.data;
        this.a = data.data.businessSPinfo;
        this.b = data.data.sPticketinfos[0];
        this.list = data.data.list[0];
        // for (let i = 0; i < this.applyData.length; i++) {
        //   if (this.applyData[i].id == data.data.list[i].id) {
        //     this.applyData[i].pjsyts = data.data.list[i].residualdate;
        //   }
        //   this.applyData[i].number = i + 1;
        // }
      } else {
        ElMessage.error("数据错误");
      }
    },
    // 获取发票信息 /api/Invoice/getInvoice
    async getInvoice() {
      let url = "/api/Invoice/getInvoice";
      let params = {
        applyid: this.id,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        this.InvoiceList = data.data;
        for (let i = 0; i < this.InvoiceList.length; i++) {
          this.InvoiceList[i].number = i + 1;
        }
      }
    },
    // 获取合同信息
    async getContract() {
      let url = "/api/TblContract/getContract";
      let params = {
        applyid: this.id,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        this.contractList = data.data;
        for (let i = 0; i < this.contractList.length; i++) {
          this.contractList[i].number = i + 1;
        }
      }
    },
    async checkApply() {
      let id = this.id;
      let a = [];
      let { data } = await getFilePath(id);
      if (data) {
        if (data.length == 0) return ElMessage.error("暂无票据信息");
        for (let i = 0; i < data.length; i++) {
          a.push(data[i].path);
        }
        this.imgData = a;
      }
    },
    // 点击表格查看
    async checkSuccess(index, row) {
      let objectno = row[index].id;
      let { data } = await getFilePath(objectno);
      if (data.length != 0) {
        const imgUrlStr = data[0].path;
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = data[0].name;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      } else {
        ElMessage.warning("暂无资料，无法查看");
      }
    },
    // 返回上一页
    goBack() {
      this.$router.push("/projectCrossBorder");
    },
    changeHash(idName) {
      document.querySelector(idName).scrollIntoView(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  // 返回上一页
  .back {
    position: absolute;
    cursor: pointer;
    left: 0px;
    font-size: 16px;
    color: #0a7be0;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 24px;
    .icon {
      margin: 0 10px 0 4px;
    }
    .span {
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    // border-radius: 6px;
    margin: 15px 0 10px 0;
    padding: 20px;

    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 24px;
      p {
        font-size: 20px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #333333;
      }
      h5 {
        width: 66px;
        height: 18px;
        border-radius: 2px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 18px;
        margin-left: 8px;
        &.spz {
          background: #48a0b8;
        }
        &.sptg {
          background: #48b8a7;
        }
        &.spjj {
          background: #ff6060;
        }
        &.dfk {
          background: #f19149;
        }
        &.yfk {
          background: #13b5b1;
        }
        &.yyq {
          background: #ec6941;
        }
        &.zcjx {
          background: #80c269;
        }
        &.yqjx {
          background: #448aca;
        }
        &.yqx {
          background: #556fb5;
        }
        &.djf {
          background: #6291fa;
        }
      }
    }
    // <!-- 产品详细信息开始 -->
    .details {
      width: 100%;
      margin-left: 10px 10px;
      .details-item {
        display: flex;
        width: 100%;

        .details-item-left {
          display: flex;
          width: 48%;
          height: 100%;
          ul {
            width: 180px;
            height: 100%;
            font-size: 17px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            li {
              margin-top: 12px;
              height: 30px;
              background-color: #fff;
            }
          }
          div {
            width: 180px;
            height: 100%;
            margin-left: 12px;
            p {
              height: 30px;
              font-size: 17px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #4d4d4d;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
  .f2 {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    // border-radius: 6px;
    padding: 20px 20px;
    scroll-behavior: smooth;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60px;
      z-index: 99;

      h3 {
        height: 32px;
        width: 75px;
        line-height: 28px;
        text-align: center;
        box-sizing: border-box;
        margin-left: 15px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #838383;
        cursor: pointer;
        &.active {
          box-sizing: border-box;
          border-bottom: 2px solid #0a7be0;
          color: #0a7be0;
        }
        a:hover {
          color: #0a7be0;
        }
      }
    }
    .f2-f2 {
      width: 100%;
      // height: 275px;
      // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      //   height: 505px;
      // }
      // overflow: auto;
      scroll-behavior: smooth;
      .null {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 310px;
        img {
          width: 326px;
          height: 212px;
        }
        discount p {
          font-size: 13px;
          color: #666;
          margin-bottom: 8px;
          a {
            color: #0a7be0;
            cursor: pointer;
          }
          span {
            color: #0a7be0;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
      .enquiry {
        display: flex;
        margin: 10px 15px;

        .enquiry-item {
          display: flex;
          width: 48%;
          height: 100%;
          ul {
            width: 170px;
            height: 100%;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            li {
              margin-top: 10px;
              height: 30px;
              background-color: #fff;
            }
          }
          div {
            width: 280px;
            height: 100%;
            margin-left: 15px;
            p {
              height: 30px;
              font-size: 15px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #4d4d4d;
              margin-top: 10px;
            }
          }
        }
      }
      h2 {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #333;
        margin: 15px 15px 10px 15px;
        span {
          img {
            margin-right: 5px;
            margin-top: -4px;
          }
          cursor: pointer;
          margin-left: 15px;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          text-decoration: underline;
          color: #0a7be0;
        }
      }
      // 基本信息
      .details-item {
        display: flex;
        justify-content: space-between;
        margin: 10px 15px;
        .details-item-left {
          display: flex;
          width: 49%;
          height: 100%;
          ul {
            width: 120px;
            height: 100%;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            li {
              margin-top: 15px;
              height: 30px;
              background-color: #fff;
            }
          }
          div {
            width: 135px;
            height: 100%;
            margin-left: 15px;
            p {
              height: 30px;
              font-size: 15px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #4d4d4d;
              margin-top: 15px;
            }
          }
        }
      }
      // 表格编辑/查看
      .span {
        display: inline-block;
        width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #0a7be0;
        border-bottom: 1px solid #0a7be0;
        cursor: pointer;
      }
    }
    // 项目进度
    .schedule {
      width: 100%;
      margin: 50px 0;
      .schedule1 {
        box-sizing: border-box;
        padding: 0 45px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 35px;

        img {
          width: 35px;
        }
        h1 {
          width: 250px;
          height: 1px;
          background: #3f6ef2;
          &.dfk {
            background: #a4a4a4;
          }
        }
      }
      .schedule2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 0 7px;
        width: 100%;
        height: 35px;
        h2 {
          width: 150px;
          height: 1px;
        }
        span {
          font-size: 17px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #3f6ef2;
          &.dfk {
            color: #a4a4a4;
          }
        }
        .state {
          box-sizing: border-box;
          padding: 0px 4px;
          display: flex;
          justify-content: center;
          justify-items: center;
          position: absolute;
          left: 54%;
          background: #22b556;
          opacity: 0.8;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          &.jj {
            background: #fc6464;
          }
          &.yqx {
            background: #556fb5;
          }
        }
      }
      .schedule3 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 35px;
        h3 {
          width: 285px;
          height: 1px;
        }
        span {
          display: block;
          width: 350px;
          text-align: center;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #8d93a1;
        }
      }
    }
  }
  .f2-f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2-f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 15px;
    .file {
      font-size: 15px;
      margin-right: 10px;
      color: #0a7be0;
      text-decoration: underline;
      cursor: pointer;
    }
    .file1 {
      color: #999;
    }
  }
  // 弹出框
  .dialog-center {
    margin: 0 auto;
    width: 90%;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
}
.content {
  margin: 0 auto;
  position: relative;
  width: 960px;
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table thead {
  height: 40px;
}
</style>
